<template>
	<view class="order-index">
		<view class="order-list">
			<view class="u-flex" style="padding: 20rpx 0;justify-content: flex-end;">
				<view class="u-flex st-item" @click="notice">
					<view class="st-l">添加提醒</view>
				</view>
			</view>
			
			<template v-if="pageList.length > 0">
				<view class="order-item" v-for="(item,key) in pageList" :key="key" >
					<view class="order-item__info flex">
						<view class="title">提醒时间</view>
						<view class="value">{{ item.notice_date }} {{ item.notice_time }}</view>
					</view>
					<view class="order-item__info flex">
						<view class="title">提醒内容</view>
						<view class="value">{{ item.notice_content }}</view>
					</view>
					<view class="order-item__info flex">
						<view class="title">提醒状态</view>
						<view class="value">
							<u-text :size="28" :color="item.process_time > 0 ? '#4cd964' : 'red'" :text="item.process_time_display"></u-text>
						</view>
					</view>
				</view>
			</template>
			
			<view v-else>
				<u-empty :iconSize="120" :textSize="28"></u-empty>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" fontSize="32" :iconSize="32" line v-if="pageList.length > 0" />
		
		<!-- 提醒 -->
		<view v-show="cusNotice" title="添加提醒" class="notice-form">
			<view class="slot-content">
				<u-form labelPosition="left" :model="noticeForm" labelWidth="140" ref="uForm">
					<u-form-item label="提醒日期" prop="noticeForm.notice_date" borderBottom>
						<view class="text-area-box">
							<picker mode="date" :value="noticeForm.notice_date" @change="confirmNoticeDate">
								<view class="flex">
									<view class="uni-input">{{ noticeForm.notice_date || '请点击选择日期' }}</view>
								</view>
							</picker>
						</view>
					</u-form-item>
					
					<u-form-item label="提醒时间" prop="noticeForm.notice_time" borderBottom>
						<view class="text-area-box">
							<picker mode="time" :value="noticeForm.notice_time" @change="confirmNoticeTime">
								<view class="flex">
									<view class="uni-input">{{ noticeForm.notice_time || '请点击选择时间' }}</view>
								</view>
							</picker>
						</view>
					</u-form-item>
					
					<u-form-item label="提醒内容" prop="noticeForm.notice_content">
						<view class="text-area-box">
							<u-textarea v-model="noticeForm.notice_content" placeholder="请填写提醒内容" :height="120" count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="">
						<view class="comfirm-form-btns u-flex">   
							<view class="btn cancel" @click="cusNotice=false">取消</view>
							<view class="btn confirm" @click="submitNotice()">保存</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCustomerNotices,customerNoticeSave } from '@/api/api.js'
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				filter: {
					uid: 0,
					page: 1,
					limit: 20
				},
				pageList: [],
				cusNotice: false,
				noticeForm: {
					cus_uid: 0,
					notice_date: '',
					notice_time: '',
					notice_content: ''
				},
			}
		},
		methods:{
			searchCustomer() {
				this.initPage()
				this.getPageList()
			}
			,getPageList() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				getCustomerNotices(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.pageList = uni.$lv.array.union(this.pageList , _result)
					this.loadStatus = 'loadmore'
				})
			}
			,initPage() {
				this.loadStatus = 'loadmore'
				this.filter.page = 1
				this.pageList = []
			}
			// 客户跟进
			,notice() {
				this.cusNotice = true
			}
			,confirmNoticeDate(e) {
				this.noticeForm.notice_date = e.detail.value
			}
			,confirmNoticeTime(e) {
				this.noticeForm.notice_time = e.detail.value
			}
			// 提交客户跟进内容
			,submitNotice() {
				if ( !this.noticeForm.notice_date ) {
					return uni.showToast({
						title: '请设置提醒日期',
						icon: 'none'
					})
				}
				
				if ( !this.noticeForm.notice_time ) {
					return uni.showToast({
						title: '请设置提醒时间',
						icon: 'none'
					})
				}
				
				if ( !this.noticeForm.notice_content ) {
					return uni.showToast({
						title: '请设置提醒内容',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '提交中'
				})
				customerNoticeSave(this.noticeForm).then(_ => {
					uni.showToast({
						title: '保存成功'
					})
					
					this.initPage()
					this.getPageList()
					this.cusNotice = false
				})
			}
		},
		onLoad(options) {
			// 如果参数中有customerUid说明是普通销售经理
			this.filter.uid = options.customerUid || 0
		},
		mounted() {
			this.getPageList()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.initPage()
			this.getPageList()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getPageList()
		},
		watch: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color-grey;
	}
	.notice-form {
		padding: 40rpx 30rpx;
		background-color: #fff;
		color: #fff;
		border-top: 5px solid #ddd;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: fixed;
		bottom: 0;
		width: 690rpx;
		.text-area-box {
			flex: 1;
		}
		.comfirm-form-btns {
			width: 100%;
			justify-content: space-between;
			.btn {
				width: 48%;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				padding: 16rpx 0rpx;
				border-radius: 10rpx;
			}
			.cancel {
				color: #909399;
				background-color: #666;
			}
			.confirm {
				color: #fff;
				background-color: $uni-primary-main;
			}
		}
	}
	.st-item {
		.st-l {
			font-size: 26rpx;
			color: #fff;
			background-color: $uni-primary-main;
			padding: 4rpx 10rpx;
			border-radius: 10rpx;
		}
		
	}
	.order-index {
		background-color: $uni-bg-color-grey;
		min-height: calc(100vh - 44px);
		.text-area-box {
			width: 360rpx;
		}
		padding-bottom: 30rpx;
		.order-list {
			padding: 30rpx;
			.order-item {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				&__info {
					font-size: 28rpx;
					.title{
						margin-right: 20rpx;
						color: #909399;
						width: 130rpx;
					}
					.value {
						color: $u-main-color;
						flex: 1;
						color: #666;
						font-size: 26rpx;
					}
				}
				&__info:not(:last-child){margin-bottom: 20rpx;}
			}
			.order-item:not(:last-child){margin-bottom: 40rpx;}
		}
	}
</style>
